<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>index页面</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
</style>
</head>
<body>
	<div class="container">
		<header>
			<h1>index页面</h1>
		</header>
		<main>
			<form id="form" action="http://localhost/submit.php" method="POST" enctype="multipart/form-data" >
				<fieldset>
					<legend>测试</legend>
					<input  name="name" type="text" pattern="[a-zA-Z]{5,20}" 
					autocomplete="off"  id="inp1" value="Hello"
					oninvalid="validate('请输入5~20位字母的用户名')">
				</fieldset>
				<fieldset>
					<legend>课程</legend>
					<select name="lesson[]" multiple size="10">
						<optgroup label="后台">
							<option value="php">PHP</option>
							<option value="linux">LINUX</option>
							<option value="mysql">MYSQL</option>
						</optgroup>
						<optgroup label="前台">
							<option value="html">HTML</option>
							<option selected="selected" value="js">JAVASCRIPT</option>
							<option value="css">CSS</option>
						</optgroup>
					</select>
				</fieldset>
				<fieldset>
					<legend>性别</legend>
					<input type="radio" name="sex" value="boy" id="boy">
					<label for="boy">男</label>
					<input type="radio" name="sex" value="girl" id="girl" checked>
					<label for="girl">女</label>
				</fieldset>
				<fieldset>
					<legend>复选框</legend>
					<input type="checkbox" name="checkbox[]" value="php" id="php">
					<label for="php">PHP Language</label>
					<input type="checkbox" name="checkbox[]" 
							value="mysql" id="mysql" checked>
					<label for="mysql">MYSQL数据库</label>
				</fieldset>
				<fieldset>
					<legend>文件上传</legend>
					<input type="file" name="icon" multiple="multiple" accept="image/png,image/gif">
				</fieldset>

				<button  id="bt2">提交表单</button>
			</form>
		</main>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script src="index.js"></script>
	<script type="text/javascript">
		function validate(message) {
			alert(message);
		}
		console.log($('[name=name]').attr('autocomplete'), inp1.autocomplete)
		console.log($('form').attr('enctype'), form.enctype)
	</script>
</body>
</html>